<script>
import {list} from "@/api/department";
import {
  getDepartmentAppointmentSchedulerInfos,
  selectAppointmentSchedulerDetailInfos
} from "@/api/appointmentScheduler";

export default {
  name: "Scheduler",
  created() {
    this.load();
    this.currentDate=new Date(this.getCurrentDate()).getTime();
  },
  data(){
    return{
      departmentList:[],
      departmentId:null,
      departmentAppointmentSchedulerList:[],
      morningAppointmentSchedulerDetailInfos:[],
      afternoonAppointmentSchedulerDetailInfos:[],
      workDate:null,
      currentDate:null,
      currentPage: 1,
      pageSize: 30,
      total: 0,
      activeIndex:0,
      defaultProps:{
        children:"secondClassDepartmentList",
        label:"name"
      }
    }
  },
  methods:{
    load(){
      list().then(res => {
        this.departmentList = res.data;
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.workDate=null;
      this.activeIndex=0;
      this.getDepartmentAppointmentScheduler();
    },
    getDepartmentAppointmentScheduler(){
      let params={
        currentPage:this.currentPage,
        pageSize:this.pageSize,
        departmentId:this.departmentId
      }
      getDepartmentAppointmentSchedulerInfos(params).then(res=>{
        if (res.code === 200) {
          this.departmentAppointmentSchedulerList=res.data.records;
          console.log(this.departmentAppointmentSchedulerList)
          this.total=res.data.total;
          if(this.workDate==null){
            this.workDate=this.departmentAppointmentSchedulerList[0].workDate;
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            center: true
          });
        }
      })
    },
    handleNodeClick(data){
     if(data.secondClassDepartmentList!=null){
       return;
     }
     this.departmentId=data.id;
     this.currentPage=1;
     this.getDepartmentAppointmentScheduler();
    },
    selectDate(item,index){
      this.workDate=item.workDate;
      this.activeIndex=index;
      if(item.availableNumber==0){
        return;
      }
      let query={
        departmentId:this.departmentId,
        workDate:this.workDate
      };
      this.$router.push({path:'/front/schedulerDetailInfos',query:query});
    },
    getCurrentDate(){
      let date=new Date();
      let year=date.getFullYear();
      let month=date.getMonth()+1<10 ?'0'+(date.getMonth()+1):date.getMonth()+1;
      let day=date.getDate()<10 ?'0'+date.getDate():date.getDate();
      return year+'-'+month+'-'+day;
    }
  }
}
</script>

<template>
<div>
  <div style="margin-bottom: 10px;font-size: 15px;">选择科室：</div>
  <el-container style="height: 100%">
    <el-aside class="department-list" width="200px" style="border:1px silver solid;height:600px;overflow-y:scroll;">
      <el-tree
      :data="departmentList"
      :props="defaultProps"
      :default-expand-all="true"
      style="margin-top: 10px"
      @node-click="handleNodeClick">
        <span slot-scope="{ node }">
        <img src="../../assets/科室.png" style="width: 16px; height: 16px" />
        {{ node.label }}
      </span>
      </el-tree>
    </el-aside>
    <el-main>
      <el-row>
        <el-tag v-for="(item,index) in departmentAppointmentSchedulerList" :key="item.workDate" :type="index===activeIndex?'':'info'" @click="selectDate(item,index)"style="height: 60px;margin-right: 5px;margin-bottom:10px;cursor: pointer" >
            <div style="margin-top: 10px;text-align: center;line-height: 20px">
              <span>{{item.workDate}}&emsp;{{item.dayOfWeek}}</span>
              <span style="display: block">{{item.availableNumber}}/{{item.reservedNumber}}
              <el-tag :type="item.availableNumber===0?'danger':''" effect="dark">
                {{item.availableNumber!=0?'有号':'无号'}}
              </el-tag>
              </span>
            </div>
        </el-tag>
        <el-pagination
         v-if="departmentAppointmentSchedulerList.length!=0"
        :current-page="currentPage"
        :total="total"
        :page-size="pageSize"
        layout="total,prev,pager,next"
        @current-change="handleCurrentChange">
        </el-pagination>
        <el-empty :image-size="200" description="暂无号源数据" v-else></el-empty>
      </el-row>
    </el-main>
  </el-container>
</div>
</template>

<style scoped>
.department-list{
  overflow-y: auto;
}
.department-list::-webkit-scrollbar{
  width: 4px;
}
.department-list::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.department-list::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.el-tree-node__content:hover{
  background: #244470;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: #667a9d !important;
  color: #fdc346;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: #454545;
}
.tree.el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree.el-icon-caret-right:before {
  content: 'el-icon-arrow-down';                    /*具体的图标*/
}
.tree.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: 'el-icon-arrow-down';                   /*具体的图标*/
}
.pageTree .el-tree-node__expand-icon.is-leaf:before  {
  content: '' !important;
}
</style>